<template>
  <div class="orgInfo">
    <div class="info-item">
      机构名称：
      <div>
         <el-tooltip effect="dark" :content="orgForm.name" placement="left">
          <div  class="val">
              {{orgForm.name}}
          </div>
          </el-tooltip>
      </div>
    </div>
    <div class="info-item">
      机构类型：
      <div>
         <el-tooltip effect="dark" :content="organizations.find(o => o.key == orgForm.organization).value" placement="left">
          <div  class="val">
            {{organizations.find(o => o.key == orgForm.organization).value}}
          </div>
          </el-tooltip>
      </div>
    </div>
    <div class="info-item">
      党建模式：
      <div>
         <el-tooltip effect="dark" :content="customerTypes.find(c => c.key == orgForm.type).value" placement="left">
          <div  class="val">
         {{customerTypes.find(c => c.key == orgForm.type).value}}
          </div>
          </el-tooltip>
      </div>
    </div>
    <div class="info-item">
      客户区域：
      <div>
         <el-tooltip effect="dark" :content="orgForm.province_name +''+ orgForm.city_name +''+ orgForm.district_name" placement="left">
          <div  class="val">
         {{orgForm.province_name}} {{orgForm.city_name}} {{orgForm.district_name}}
          </div>
          </el-tooltip>
      </div>
    </div>
  </div>
</template>

<script>
import { organizations ,customerTypes } from '@/consts/codesMap'
export default {
  data(){
    return{
      organizations,
      customerTypes,
      orgForm: JSON.parse(sessionStorage.getItem('orgForm'))
    }
  }
    
}
</script>

<style lang="stylus">
.orgInfo {
  width: 60%;
  height: getPx(50);
  font-size: $sm-font-size;
  color: $mute-color;
  padding-left: getPx(35);
  flexMiddle(space-between);
  .info-item {
    //flex: 1;
    flexMiddle(space-between);
    .el-tooltip{
      overflow: hidden;
      max-width: 140px;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
  }
}
</style>